<template>
  <!-- 选择渠道 -->
  <div class="right-container">
    <div class="relative">
      <el-button
        class="startingPointBtn"
        type="text"
        @click="selectSenderCompany"
      >
        {{ SenderCompanyType ? '新建发件人公司' : '选择发件人公司' }}
      </el-button>
      <el-form
        v-show="SenderCompanyType"
        ref="channelformRight"
        :model="channelformRight"
        :rules="senderRules"
        label-position="left"
        label-width="138px"
        size="mini"
        class=" form-right"
      >
        <el-form-item prop="referenceNo">
          <div slot="label">参考号：</div>
          <el-input
            v-model="channelformRight.referenceNo"
            maxlength="50"
            clearable
            placeholder="请填写英文，数字或者 -，不能超过50位"
          />
          <el-tooltip class="item" effect="light" placement="right">
            <div slot="content">
              方便您自己用来识别此运单的任意号码。
            </div>
            <i class="el-icon-question icon-absolute text-yellow" />
          </el-tooltip>
        </el-form-item>
        <!-- 发件人公司 -->

        <el-form-item prop="custoemrSenderId">
          <div slot="label">发件人公司（中）：</div>
          <el-tooltip
            class="item"
            content="点击输入可快速搜索"
            effect="light"
            placement="top-end"
          >
            <el-select
              v-model="channelformRight.custoemrSenderId"
              filterable
              placeholder="请选择"
              @change="changeSender"
            >
              <el-option
                v-for="item in customerShipperMap"
                :key="item.id"
                :label="item.shipperCompanyCN"
                :value="parseInt(item.id)"
              />
            </el-select>
          </el-tooltip>
        </el-form-item>

        <el-form-item>
          <div slot="label">发件人公司（英）：</div>
          <el-input v-model="channelformRight.shipperCompany" disabled />
        </el-form-item>
        <el-form-item>
          <div slot="label">联系人：</div>
          <el-input v-model="channelformRight.shipperAttn" disabled />
        </el-form-item>
        <el-form-item>
          <div slot="label">电话：</div>
          <el-input v-model="channelformRight.shipperPhone" disabled />
        </el-form-item>
        <el-form-item>
          <div slot="label">地址：</div>
          <el-input v-model="channelformRight.shipperAddress" disabled />
        </el-form-item>
      </el-form>
      <el-form
        v-show="!SenderCompanyType"
        ref="channelformRight"
        :model="channelformRight"
        :rules="senderRules"
        label-position="left"
        label-width="128px"
        size="mini"
        class=" form-right"
      >
        <el-form-item prop="referenceNo">
          <div slot="label">参考号：</div>
          <el-input
            v-model="channelformRight.referenceNo"
            maxlength="50"
            clearable
            placeholder="请填写英文，数字或者 -，不能超过50位"
          />
          <el-tooltip class="item" effect="light" placement="right">
            <div slot="content">
              方便您自己用来识别此运单的任意号码。
            </div>
            <i class="el-icon-question icon-absolute text-yellow" />
          </el-tooltip>
        </el-form-item>

        <el-form-item prop="senderCompany">
          <div slot="label">发件人公司名(英)：</div>
          <el-input
            v-model="channelformRight.senderCompany"
            maxlength="100"
            clearable
            placeholder="请填写发件人公司名(英)"
          />
        </el-form-item>
        <el-form-item prop="senderCompanyCN">
          <div slot="label">发件人公司名(中)：</div>
          <el-input
            v-model="channelformRight.senderCompanyCN"
            maxlength="100"
            clearable
            placeholder="请填写发件人公司名(中)"
          />
        </el-form-item>
        <el-form-item prop="senderLinkMan">
          <div slot="label">联系人：</div>
          <el-input
            v-model="channelformRight.senderLinkMan"
            clearable
            maxlength="20"
            placeholder="请填写联系人"
          />
        </el-form-item>
        <el-form-item prop="senderPhone">
          <div slot="label">电话：</div>
          <el-input
            v-model="channelformRight.senderPhone"
            clearable
            maxlength="20"
            placeholder="请填写电话"
          />
        </el-form-item>
        <el-form-item prop="senderZipCode">
          <div slot="label">邮编：</div>
          <el-input
            v-model="channelformRight.senderZipCode"
            clearable
            maxlength="20"
            placeholder="请填写邮编"
          />
        </el-form-item>
        <el-form-item prop="senderEnterpriseCreditCode">
          <div slot="label">企业信用代码：</div>
          <el-input
            v-model="channelformRight.senderEnterpriseCreditCode"
            maxlength="20"
            clearable
            placeholder="请填写企业信用代码"
          />
        </el-form-item>
        <el-form-item prop="senderAdress">
          <div slot="label">详细地址(英)：</div>
          <el-input
            v-model="channelformRight.senderAdress"
            maxlength="100"
            clearable
            placeholder="请填写详细地址(英)"
          />
        </el-form-item>
      </el-form>
    </div>
    <div>{{ checkIsTaxFarming }}</div>
    <div
      v-if="channelFormLeft && channelFormLeft.isTaxFarming === 0"
      class="relative border-top "
    >
      <el-form>
        <el-form-item>
          <div slot="label">
            自有VAT和EORI:
          </div>

          <!-- <span>{{ channelformRight.isVatAndEori ? '是' : '否' }}</span> -->
          <el-select

            v-model="channelformRight.isVatAndEori"
            filterable
            placeholder="请选择"
            style="width:100px"
            size="mini"
            :disabled="createTpye == 'OrderToAirFreight' ? true : false"
            @change="selectVAT"
          >
            <el-option label="否" :value="parseInt(0)" />
            <el-option label="是" :value="parseInt(1)" />
          </el-select>

          <el-checkbox
            v-if="
              channelformRight &&
                channelformRight.isVatAndEori === 1 &&
                ![330, 331, 334, 335, 336, 349, 371, 372].includes(
                  Number(channelFormLeft.countryId)
                )
            "
            v-model="channelformRight.isJiufangImporter"
            style="color:#F59A23"
            class="selectJiufangImporter"
            :true-label="parseInt(1)"
            :false-label="parseInt(0)"
            @change="changeJiufangImporter"
          >{{
            channelformRight.isJiufangImporter
              ? '已选择九方进口商'
              : '选择九方进口商'
          }}</el-checkbox>
          <el-button
            v-if="channelformRight && channelformRight.isVatAndEori === 1"
            class="selectImporterBtn"
            type="text"
            @click="clickSelectBtn"
          >
            选择进口商
          </el-button>
        </el-form-item>

        <template
          v-if="channelformRight && channelformRight.isVatAndEori === 1"
        >
          <div v-if="channelformRight.isJiufangImporter === 0">
            <el-form-item>
              <div slot="label">进口商公司名:</div>

              <span>{{ selectedImporterInfo.importerCompanyName }}</span>
            </el-form-item>
            <el-form-item>
              <div slot="label">联系人:</div>

              <span>{{ selectedImporterInfo.importerLinkMan }}</span>
            </el-form-item>
            <el-form-item>
              <div slot="label">电话:</div>

              <span>{{ selectedImporterInfo.importerPhone }}</span>
            </el-form-item>
            <el-form-item>
              <div slot="label">VAT:</div>

              <span>{{ selectedImporterInfo.vat }}</span>
            </el-form-item>
            <el-form-item>
              <div slot="label">EORI:</div>

              <span>{{ selectedImporterInfo.eori }}</span>
            </el-form-item>
            <el-form-item>
              <div slot="label">地址:</div>

              <span>{{ selectedImporterInfo.importerAddress }}</span>
            </el-form-item>
          </div>
        </template>
      </el-form>
    </div>

    <!--  -->
    <el-dialog
      title=""
      :visible.sync="selectImporterType"
      :before-close="closeDialog"
    >
      <div slot="title">
        <el-row class="flex align-center">
          <el-col :span="4">
            <span>选择进口商</span>
          </el-col>
          <el-col :span="6">
            <el-select
              v-model="searchCountry"
              filterable
              clearable
              size="mini"
              placeholder="请选择国家"
            >
              <el-option
                v-for="item in publicData.countryList"
                :key="item.value"
                :label="item.label"
                :value="parseInt(item.value)"
              />
            </el-select>
          </el-col>
          <el-col :span="6">
            <el-input
              v-model="searchWaybillRender"
              type="text"
              size="mini"
              placeholder="vat"
              clearable
            />
          </el-col>
          <el-col :span="6">
            <el-input
              v-model="searchCompany"
              type="text"
              size="mini"
              placeholder="公司"
              clearable
            />
          </el-col>
        </el-row>
      </div>
      <div id="dialogMain" ref="dialogMain" class="dialog-main">
        <el-card
          v-for="(item, index) in waybillRenderFilter"
          :key="index"
          class="card-main padding-bottom-sm"
          :class="{ selectCart: item.selectType, inEdit: !item.editType }"
        >
          <div class="icon-edit flex align-center justify-end">
            <span
              v-if="item.editType && item.isNew"
              class="text-red margin-right text-sm"
              @click.stop="delNewData(index)"
            >
              取消
            </span>
            <i
              v-if="!item.editType"
              class="el-icon-edit-outline text-df"
              @click.stop="editImporter(index)"
            />
            <template v-else>
              <span
                v-if="!item.isNew"
                class="margin-right"
                @click.stop="cancelForm(`importerForm${index}`, index)"
              >
                取消
              </span>
              <span @click.stop="saveForm(`importerForm${index}`, index)">
                保存
              </span>
            </template>
          </div>
          <el-form
            :ref="`importerForm${index}`"
            :model="item"
            label-position="left"
            label-width="98px"
            size="mini"
            :show-message="false"
            :rules="importerRules"
            @click.native="selectCard(index)"
            @dblclick.native="selectedCard(index)"
          >
            <el-row>
              <el-col :xs="20" :sm="20" :md="20" :lg="20">
                <el-form-item prop="importerCompany">
                  <div slot="label">进口商公司名:</div>

                  <el-input
                    v-if="item.editType"
                    v-model="item.importerCompany"
                    clearable
                  />
                  <span v-else>{{ item.importerCompany }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="margin-top-sm">
              <el-col :md="12" :lg="8">
                <el-form-item prop="importerCountry">
                  <div slot="label">国家:</div>

                  <!-- <el-input
                    v-if="item.editType"
                    v-model="item.importerCountry"
                    clearable
                  /> -->
                  <el-select
                    v-if="item.editType"
                    v-model="item.importerCountry"
                    filterable
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in publicData.countryList"
                      :key="item.value"
                      :label="item.label"
                      :value="parseInt(item.value)"
                    />
                  </el-select>
                  <span v-else>
                    {{ publicData.countryMap[item.importerCountry] }}
                  </span>
                </el-form-item>
              </el-col>
              <el-col :md="12" :lg="8">
                <el-form-item prop="importerAttn" class="text-right">
                  <div slot="label">联系人:</div>

                  <el-input
                    v-if="item.editType"
                    v-model="item.importerAttn"
                    clearable
                  />
                  <span v-else>{{ item.importerAttn }}</span>
                </el-form-item>
              </el-col>
              <el-col :md="12" :lg="8">
                <el-form-item prop="importerPhone" class="text-right">
                  <div slot="label">电话:</div>

                  <el-input
                    v-if="item.editType"
                    v-model="item.importerPhone"
                    clearable
                  />
                  <span v-else>{{ item.importerPhone }}</span>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row class="margin-top-sm">
              <el-col :md="12" :lg="8">
                <el-form-item prop="vat">
                  <div slot="label">VAT:</div>

                  <el-input v-if="item.editType" v-model="item.vat" clearable />
                  <span v-else>{{ item.vat }}</span>
                </el-form-item>
              </el-col>
              <el-col :md="12" :lg="8">
                <el-form-item prop="eori" class="text-right">
                  <div slot="label">EORI:</div>

                  <el-input
                    v-if="item.editType"
                    v-model="item.eori"
                    clearable
                  />
                  <span v-else>{{ item.eori }}</span>
                </el-form-item>
              </el-col>
              <el-col :md="12" :lg="8">
                <el-form-item prop="importerZipCode" class="text-right">
                  <div slot="label">邮编:</div>

                  <el-input
                    v-if="item.editType"
                    v-model="item.importerZipCode"
                    clearable
                  />
                  <span v-else>{{ item.importerZipCode }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item prop="importerAddress" class="margin-top-sm">
              <div slot="label">进口商地址:</div>

              <el-input
                v-if="item.editType"
                v-model="item.importerAddress"
                clearable
              />
              <span v-else>{{ item.importerAddress }}</span>
            </el-form-item>
          </el-form>
        </el-card>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button type="success" @click="addImporter">新 增</el-button>
        <el-button type="primary" @click="selectImporterFn">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { clone } from '@/utils/clone'
import { customerimporterSave, customerimporterList } from '@/api/myProfile'
import { getToken } from '@/utils/auth'
export default {
  name: 'SelectChannelRight',
  props: {
    customerShipperMap: {
      type: Array,
      default: function() {
        return []
      }
    },
    customerImporter: {
      type: Array,
      default: function() {
        return []
      }
    },
    channelFormData: {
      type: Object,
      default: function() {
        return {}
      }
    },
    importerInfo: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      searchWaybillRender: '',
      searchCountry: '',
      searchCompany: '',
      dialogTips: false,
      SenderCompanyType: true,
      selectImporterType: false,

      channelformRight: {
        referenceNo: '',
        custoemrSenderId: '',
        senderCompany: '',
        senderCompanyCN: '',
        senderLinkMan: '',
        senderPhone: '',
        senderZipCode: '',
        senderEnterpriseCreditCode: '',
        senderAdress: '',
        isVatAndEori: 1, //  自有Vat eori
        isJiufangImporter: ''
      },
      waybillRender: [],
      selectedImporterInfo: {
        importerAddress: '',
        importerCompanyName: '',
        importerLinkMan: '',
        importerPhone: '',
        importerZipCode: '',
        vat: '',
        eori: ''
      },
      senderRules: {
        custoemrSenderId: [
          { required: true, message: '请选择发件人公司', trigger: 'change' }
        ],
        referenceNo: [
          { required: false, message: '请填写正整数', trigger: 'blur' },
          {
            pattern: /^[a-zA-Z0-9_\-]*$/,
            message: '请填写英文，数字或者 -，不能超过50位'
          }
        ],
        senderCompany: [
          {
            required: true,
            message: '请填写发件人公司名(英)',
            trigger: 'blur'
          },
          {
            pattern: /^[a-zA-Z0-9_\,\'\.\/\-\s\!\@\#\$\%\^\&\*\(\)]*$/,
            message: '请填写英文或者数字'
          }
        ],
        senderCompanyCN: [
          {
            required: true,
            message: '请填写发件人公司名(中)',
            trigger: 'blur'
          }
        ],
        senderLinkMan: [
          { required: true, message: '请填写联系人', trigger: 'blur' }
        ],
        senderPhone: [
          { required: true, message: '请填写电话', trigger: 'blur' },
          {
            pattern: /^[0-9\-]*$/,
            message: '请填写数字'
          }
        ],

        senderZipCode: [
          { required: false, message: '请填写邮编', trigger: 'blur' }
        ],
        senderEnterpriseCreditCode: [
          { required: true, message: '请填写企业信用代码', trigger: 'blur' }
        ],
        senderAdress: [
          { required: true, message: '请填写详细地址', trigger: 'blur' },
          {
            pattern: /^[a-zA-Z0-9_\，\;\,\'\.\/\-\s\!\@\#\$\%\^\&\*\(\)]*$/,
            message: '请填写英文或者数字'
          }
        ]
      },
      importerRules: {
        importerCompany: [
          {
            required: true,
            message: '请填写进口公司名',
            trigger: 'blur'
          },
          {
            pattern: /^[a-zA-Z0-9_\,\'\.\/\-\s\!\@\#\$\%\^\&\*\(\)]*$/,
            message: '请填写英文或者数字'
          }
        ],
        importerPhone: [
          {
            required: true,
            message: '请填写电话',
            trigger: 'blur'
          }
          // {
          //   pattern: /^[\+ 0-9\-]*$/,
          //   message: '请填写数字'
          // }
        ],
        importerAttn: [
          {
            required: true,
            message: '请填写联系人',
            trigger: 'blur'
          },
          {
            pattern: /^[a-zA-Z0-9_\,\'\.\/\-\s\!\@\#\$\%\^\&\*\(\)]*$/,

            message: '请填写英文或者数字'
          }
        ],
        importerCountry: [
          {
            required: true,
            message: '请选择国家',
            trigger: 'change'
          }
        ],
        vat: [
          {
            required: true,
            message: '请填写VAT',
            trigger: 'blur'
          },
          {
            pattern: /^[a-zA-Z0-9_\,\.\/\-\s\!\@\#\$\%\^\&\*\(\)]*$/,

            message: '请填写英文或者数字'
          }
        ],
        eori: [
          {
            required: true,
            message: '请填写EORI',
            trigger: 'blur'
          },
          {
            pattern: /^[a-zA-Z0-9_\,\.\/\-\s\!\@\#\$\%\^\&\*\(\)]*$/,

            message: '请填写英文或者数字'
          }
        ],
        importerZipCode: [
          { required: true, message: '请填写邮编', trigger: 'blur' },
          {
            pattern: /^[a-zA-Z0-9_\,\'\.\/\-\s\!\@\#\$\%\^\&\*\(\)]*$/,
            message: '请填写英文或者数字'
          }
        ],
        importerAddress: [
          {
            required: true,
            message: '请填写进口商地址',
            trigger: 'blur'
          },
          {
            pattern: /^[a-zA-Z0-9_\,\'\.\/\-\s\!\@\#\$\%\^\&\*\(\)]*$/,

            message: '请填写英文或者数字'
          }
        ]
      },
      timer: null
    }
  },

  computed: {
    ...mapGetters(['channelFormLeft', 'createTpye', 'publicData']),
    waybillRenderFilter() {
      let list = []
      console.log('this.waybillRender :>> ', this.waybillRender)
      if (
        this.searchWaybillRender &&
        this.searchCountry &&
        this.searchCompany
      ) {
        list = this.waybillRender.filter(
          x =>
            x.vat &&
            x.vat.indexOf(this.searchWaybillRender) > -1 &&
            x.importerCountry === this.searchCountry &&
            x.importerCompany &&
            x.importerCompany.indexOf(this.searchCompany) > -1
        )
      } else if (
        this.searchWaybillRender &&
        !this.searchCountry &&
        !this.searchCompany
      ) {
        list = this.waybillRender.filter(
          x => x.vat && x.vat.indexOf(this.searchWaybillRender) > -1
        )
      } else if (
        !this.searchWaybillRender &&
        this.searchCountry &&
        !this.searchCompany
      ) {
        list = this.waybillRender.filter(
          x => x.importerCountry === this.searchCountry
        )
      } else if (
        !this.searchWaybillRender &&
        !this.searchCountry &&
        this.searchCompany
      ) {
        list = this.waybillRender.filter(
          x =>
            x.importerCompany &&
            x.importerCompany.indexOf(this.searchCompany) > -1
        )
      } else {
        list = this.waybillRender
      }

      return list
    },
    checkIsTaxFarming() {
      return this.channelFormLeft && this.channelFormLeft.isTaxFarming
    }
  },

  watch: {
    customerImporter(val) {
      console.log('val :>> ', val)
      if (val) {
        this.setList()
      }
    },
    channelFormLeft: {
      handler(newVal, oldVal) {
        console.log('newVal.isTaxFarming :>> ', newVal.isTaxFarming)
        if (newVal.isTaxFarming) {
          this.$set(this.channelformRight, 'isVatAndEori', 0)
        } else {
          this.$set(this.channelformRight, 'isVatAndEori', 1)
        }
      },
      deep: true,
      immediate: true
    },
    channelformRight: {
      handler(newVal, oldVal) {
        this.$store.dispatch('createWaybill/changeChannelFormRight', newVal)
        // console.log('newVal :>> ', newVal)
        this.$emit('update:channelFormData', newVal)
      },
      deep: true,
      immediate: true
    },
    selectedImporterInfo: {
      handler(newVal, oldVal) {
        this.$store.dispatch('createWaybill/selectedImporterInfo', newVal)
        this.$emit('update:importerInfo', newVal)
      },
      deep: true,
      immediate: true
    },
    customerShipperMap(val) {
      console.log('1 :>> ', 1)
      for (const i of this.customerShipperMap) {
        if (i.defaultValue) {
          this.channelformRight.custoemrSenderId = i.id
          this.channelformRight.shipperAttn = i.shipperAttn
          this.channelformRight.shipperPhone = i.shipperPhone
          this.channelformRight.shipperAddress = i.shipperAddress
          this.channelformRight.shipperCompany = i.shipperCompany
        }
      }
    }
  },
  mounted() {
    this.getInfo()
  },
  methods: {
    async getInfo() {
      this.waybillRender = await customerimporterList({
        authorization: getToken()
      })

      for (const i of this.waybillRender) {
        i.importerZipCode = i.zipCode
        i.selectType = false
        i.editType = false
      }
    },
    changeSender(val) {
      for (const i of this.customerShipperMap) {
        if (
          this.channelformRight.custoemrSenderId &&
          this.channelformRight.custoemrSenderId === i.id
        ) {
          this.channelformRight.shipperAttn = i.shipperAttn
          this.channelformRight.shipperPhone = i.shipperPhone
          this.channelformRight.shipperAddress = i.shipperAddress
          this.channelformRight.shipperCompany = i.shipperCompany
        }
      }
    },
    // 单击加效果
    selectCard(index) {
      const time = this.timer
      clearTimeout(time) // 首先清除计时器
      this.timer = setTimeout(() => {
        for (const i in this.waybillRenderFilter) {
          this.$delete(this.waybillRenderFilter[i], 'selectType')
          if (parseInt(i) === index) {
            this.$set(this.waybillRenderFilter[index], 'selectType', true)
          } else {
            this.waybillRenderFilter[i].selectType = false
          }
        }
        console.log('单击', this.waybillRenderFilter)
      }, 300) // 大概时间300ms
    },
    // 双击=> 选择该进口商
    selectedCard(index) {
      const time = this.timer
      clearTimeout(time)
      if (this.waybillRenderFilter[index].editType) {
        this.$message({
          message: '请先保存！',
          type: 'warning'
        })
        return false
      }
      this.selectImporterType = false
      this.selectedImporterInfo = {
        importerAddress: this.waybillRenderFilter[index].importerAddress,
        importerCompanyName: this.waybillRenderFilter[index].importerCompany,

        importerLinkMan: this.waybillRenderFilter[index].importerAttn,

        importerPhone: this.waybillRenderFilter[index].importerPhone,

        importerZipCode: this.waybillRenderFilter[index].zipCode,
        vat: this.waybillRenderFilter[index].vat,
        eori: this.waybillRenderFilter[index].eori,
        customerImporterId: this.waybillRenderFilter[index].id
      }
    },
    // 保存进口商信息
    saveForm(formName, index) {
      this.$refs[formName][0].validate(valid => {
        if (valid) {
          this.importerSave(index)
        } else {
          return false
        }
      })
    },
    cancelForm(formName, index) {
      this.waybillRenderFilter[index].editType = false
    },
    // 调用保存进口商信息
    async importerSave(index) {
      this.$store.dispatch('app/toggleDialog', true)
      const importerInfo = this.waybillRenderFilter[index]
      console.log('importerInfo :>> ', importerInfo)
      importerInfo.zipCode = importerInfo.importerZipCode
      importerInfo.vat = importerInfo.vat.replace(/\s*/g, '')
      importerInfo.eori = importerInfo.eori.replace(/\s*/g, '')

      const data = await customerimporterSave(importerInfo)
      if (data.code === 200) {
        this.waybillRenderFilter[index].editType = false

        if (this.waybillRenderFilter[index].isNew) {
          this.$delete(this.waybillRenderFilter[index], 'isNew')
        }
        if (!this.waybillRenderFilter[index].id) {
          this.$set(this.waybillRenderFilter[index], 'id', data.data)
        }
        this.$message({
          message: '保存成功',
          type: 'success'
        })
        // this.$store.dispatch('createWaybill/initWaybillRender')
        this.dialogFormVisible = false
      } else {
        this.$message.error(data.message)
      }
      this.$store.dispatch('app/toggleDialog', false)
    },
    // 关闭弹窗
    closeDialog(done) {
      // console.log(done)
      if (!this.waybillRenderFilter) {
        done(true)
        return
      }
      for (const i of this.waybillRenderFilter) {
        if (i.editType) {
          this.$message({
            message: '请先保存！',
            type: 'warning'
          })
          return false
        }
      }

      done(true)
    },
    changeJiufangImporter() {
      if (
        this.channelformRight.isJiufangImporter &&
        this.channelformRight.isJiufangImporter !== null
      ) {
        this.selectedImporterInfo.importerCompanyName = ''
        this.selectedImporterInfo.importerLinkMan = ''
        this.selectedImporterInfo.importerPhone = ''
        this.selectedImporterInfo.vat = ''
        this.selectedImporterInfo.eori = ''
        this.selectedImporterInfo.importerAddress = ''
        this.selectedImporterInfo.importerZipCode = ''
      } else {
        this.selectedImporterInfo = {}
      }
    },
    selectImporterFn() {
      if (this.waybillRenderFilter && this.waybillRenderFilter.length > 0) {
        const target = []
        for (const i of this.waybillRenderFilter) {
          console.log('i.selectType :>> ', i.selectType)
          if (i.editType) {
            this.$message({
              message: '请先保存！',
              type: 'warning'
            })
            return false
          }
          if (i.selectType) {
            target.push(i)
          }
        }

        if (target.length === 0) {
          this.$message({
            message: '请选择一个进口商',
            type: 'warning'
          })
          return false
        } else {
          this.$message({
            message: '选择了进口商',
            type: 'success'
          })
          // console.log(i)

          this.selectImporterType = false

          this.selectedImporterInfo = {
            importerAddress: target[0].importerAddress,
            importerCompanyName: target[0].importerCompany,
            importerLinkMan: target[0].importerAttn,
            importerPhone: target[0].importerPhone,
            importerZipCode: target[0].zipCode,
            vat: target[0].vat,
            eori: target[0].eori,
            customerImporterId: target[0].id
          }
        }
      } else {
        this.$message({
          message: '请先填写进口商信息',
          type: 'warning'
        })
      }
    },

    setList() {
      this.waybillRender = clone(this.customerImporter)
      for (const i of this.waybillRender) {
        i.importerZipCode = i.zipCode
        i.selectType = false
        i.editType = false
      }
    },
    // 新增进口商
    addImporter() {
      // this.showAddImporter = true
      // if (this.waybillRender && this.waybillRender.length >= 20) {
      //   this.$message.warning('常用进口商地址上限为20个')

      //   return
      // }
      for (const i of this.waybillRender) {
        if (i.editType) {
          this.$message.warning('请先保存或者取消正在编辑的数据')
          return
        }
      }

      this.$refs.dialogMain.scrollTop = 0

      const newData = {
        editType: true,
        isNew: true,
        selectType: false,
        id: '',
        importerCompany: '',
        importerCountry: '',
        importerAttn: '',
        importerPhone: '',
        vat: '',
        zipCode: '',
        eori: '',
        importerAddress: '',
        defaultValue: 1
      }
      // let list = []
      if (this.waybillRender && this.waybillRender.length > 0) {
        // list = clone(this.waybillRender)
        this.waybillRender.unshift(newData)
      } else {
        this.waybillRender.push(newData)
      }

      // this.$delete(this.waybillRender, 'customerImporter')
      // this.$set(this.waybillRender, 'customerImporter', list)
    },
    editImporter(index) {
      // 进入编辑状态
      this.$delete(this.waybillRender[index], 'editType')
      this.$set(this.waybillRender[index], 'editType', true)
    },
    // 删除未保存的进口商信息
    delNewData(index) {
      console.log('index :>> ', index)
      this.$confirm('是否删除该项?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.waybillRender.splice(index, 1)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {})
    },
    // 保存发件人信息
    async saveSenderCompany() {
      this.$refs.channelformRight.validate(valid => {
        if (valid) {
          this.SenderCompanyType = !this.SenderCompanyType

          return true
        } else {
          // console.log('error submit!!')
          return false
        }
      })
    },
    // 切换选择/新建
    selectSenderCompany() {
      if (this.SenderCompanyType) {
        this.SenderCompanyType = !this.SenderCompanyType
        this.channelformRight.senderCompany = ''
        this.channelformRight.custoemrSenderId = ''
        this.channelformRight.shipperAttn = ''
        this.channelformRight.shipperPhone = ''
        this.channelformRight.shipperAddress = ''
      } else {
        this.$confirm('已填发件人公司资料将被清空？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.SenderCompanyType = !this.SenderCompanyType
            this.channelformRight.senderCompany = ''
            this.channelformRight.senderCompanyCN = ''
            this.channelformRight.senderLinkMan = ''
            this.channelformRight.senderPhone = ''
            this.channelformRight.senderZipCode = ''
            this.channelformRight.senderEnterpriseCreditCode = ''
            this.channelformRight.senderAdress = ''
          })
          .catch(() => {
            // this.SenderCompanyType = !this.SenderCompanyType
          })
      }
    },
    clickSelectBtn() {
      this.selectImporterType = true
      if (this.selectImporterType) {
        this.channelformRight.isJiufangImporter = 0
      }
    },
    selectVAT(val) {
      if (val === 0) {
        this.selectedImporterInfo = {
          customerImporterId: '',
          importerAddress: '',
          importerCompanyName: '',
          importerLinkMan: '',
          importerPhone: '',
          importerZipCode: '',
          vat: '',
          eori: ''
        }
      }
    }
  }
}
</script>

<style scoped>
/deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
  color: green;
}
/deep/.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: green;
  border-color: green;
}
/deep/.el-checkbox__inner:hover {
  border-color: green;
}
/deep/.el-checkbox__inner::after {
  border: 1px solid #fff;
  border-left: 0;
  border-top: 0;
}
</style>
<style lang="scss" scoped>
.form-right {
  height: 100%;
}
.icon-question {
  font-size: 18px;
  vertical-align: text-top;
  margin-left: 10px;
}

.icon-absolute {
  position: absolute;
  right: -24px;
  font-size: 18px;
  top: 50%;
  margin-top: -9px;
}
ul {
  list-style: none;

  li {
    margin-bottom: 12px;
  }
}

.border-top {
  padding-top: 40px;
  border-top: 1px solid #e9e9eb;
}

.relative {
  .startingPointBtn {
    position: absolute;
    right: 0;
    top: -30px;
    padding: 3px 0;
  }
  .startingPointBtn2 {
    right: 140px;
  }
  .selectImporterBtn {
    position: absolute;
    right: 0;
    top: 10px;
    padding: 3px 0;
  }
  .selectJiufangImporter {
    position: absolute;
    right: 120px;
    top: 0;
    padding: 3px 0;
  }
}

.dialog-main {
  background: #f5f9fc;
  padding: 12px 16px;
  max-height: 500px;
  overflow-y: scroll;
  .card-main {
    padding: 20px 20px;
    position: relative;
    &:not(:last-child) {
      margin-bottom: 20px;
    }
    // .form-main {
    //   padding: 20px 20px 0;
    //   position: relative;
    .icon-edit {
      position: absolute;
      z-index: 100;
      top: 0;
      right: 0;
      height: 60px;
      font-size: 20px;
      color: #409eff;
      padding-right: 10px;
      i {
        cursor: pointer;
      }
      span {
        cursor: pointer;
        font-size: 10px;
      }
    }
    // }
  }
  .selectCart {
    box-shadow: 0 2px 12px 0 rgba(67, 201, 162, 1);
  }
}
</style>
<style lang="scss">
.text-tips {
  color: red;
  .el-form-item__label {
    color: red;
  }
}

.right-container {
  .el-dialog__body {
    padding: 12px;
  }
  .inEdit {
    .el-form-item__content {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>
